<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="format-detection" content="telephone=no" />
    <title>卡信息查询</title>
    <link rel="stylesheet" href="css/base.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/base.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/handle.js"></script>
    <script src="js/jweixin-1.0.0.js"></script>  
    <script src="js/jquery.bluetooth.js"></script>  
    <script type="text/javascript">
        $(function () {
            var opts = {
                access_token:'${accessToken}',
                openId:'${openId}',                 //后台返回openid
                appId:'${wxconfig.appid}',                  //后台返回appid
                timestamp:'${wxconfig.timestamp}',          //后台返回生成证书时用的时间戳
                nonceStr:'${wxconfig.noncestr}',            //后台返回生成证书时用的随机串
                signature:'${wxconfig.signature}',          //后台返回以当前URL地址生成的证书
            };
            ble = new Ble();
            ble.bleInit(opts);
            //点击读卡 弹出识别蓝牙对话框
            $("#query_read").click(startReadCard);

            function startReadCard(){
                if(!bleInited){
                    errorToast(bleInfo.STAUS_INIT,3);
                    return;
                }
                if(bleStatus){
                    $(".query_find_blue, .mask_layer").removeClass('none');
                    ble.getWXDeviceInfos();
                    ble.scanDevice();
                }else{
                    errorToast(bleInfo.STAUS_BLUETOOTH_OFF,3);
                }
            }

            //点击弹出框右上角X 关闭遮罩层
            $(".query_close").click(function(e) {
                ble.countover();
                $(".mask_layer, .mask_layer>div").addClass('none');
            });

            $("#reQuery").click(function(e) {
                if(bleStatus){
                    $(".query_result,.query_read_box").addClass('none');
                    startReadCard();
                }else{
                    errorToast(bleInfo.STAUS_BLUETOOTH_OFF,3);
                }
                
            });

            // 选择蓝牙盒子 
            $(".nextStep").click(function(e) {
                if($(this).hasClass("disable")) return;
                // 开始卡片操作 圈存中
                ble.maskBoxShow("query_read_box");
                
                ble.sendDataInit("readCard");
                $(this).addClass("disable");
            });
        })
    </script>
</head>
<body class="">
<div id="info" style="word-break:break-all"></div>
<div class="wrap">
    <div class="query_top">
        <img src="img/query_top.png">
        <h3>读取赣通卡，查询卡内余额</h3>
        <h4 class="query_read" id="query_read">读卡查询</h4>
    </div>
</div>
<div class="mask_layer none"></div>

<!-- 卡查询结果 -->
<div class="query_result none" id="queryResult">

    <div class="query_card_box">
        <h1 id="queryNum"  class="query_num"></h1>
        <h2 id="queryType"  class="query_type">
            赣通卡 ·
            <span id="cardType"></span>
        </h2>
        <h3 class="query_atradebal" id="cardBalance">
        </h3>
        <h4 class="queryText"></h4>
        <h5 class="queryText2">
            <span id="queryVpl"  class="query_vpl"></span>
            <span id="queryEndDate"  class="query_enddate"></span>
        </h5>
    </div>

    <hr class="query_divide">
    <div class="query_result_body">
        <h2 class="query_result_top">
            <i class="wallet_icon"></i>
            账户余额
			<span>
				<i class="time_icon"></i>
				查询记录
			</span>
        </h2>
        <h3 class="query_result_btm">
            <p class = "load-normal ">
                ¥<i id="amountBalance"></i>
                <span class="" id="amountDate"></span>
            </p>
            <p class = "load-error errorLoad" style="display:none">加载异常！</p>

        </h3>
    </div>
    <h2 id="reQuery" class="re_query">重新查询</h2>
</div>
<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none">信息输入有误</div>
<div class="loading" style="display:none">
    <img src="img/loading.gif">
</div>
<script type="text/javascript">
    function send0018Info(vlp, cardNo, expiredate, tradelists, callback) {
        console.log('step into send0018Info()');
        var data = {
            vlp: vlp,
            cardNo: cardNo,
            expiredate: expiredate,
            tradelists: tradelists
        }

        $(".loading").show();
        $.ajax({
            url:  'card/send0018Info',
            type: 'POST',
            dataType: 'json',
            data: data,
            cache: false,
            timeout: 15000,
            complete: function(r) {
                console.log(r);
                if (callback && typeof(callback) == "function") {
                    callback();
                };

            }
        });
    }
</script>
</body>
</html>